<template>
  <div class="out">
    <div class="outline">
      <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" class="treeDiv">
      </el-tree>

      <div>
        <div>
          <el-input style="width: 200px;" type="textarea" :rows="10" placeholder="请输入sql语句！" v-model="sqltext">
          </el-input>

          <div class="sql-btn">
            <el-button size="small" type="primary" @click="sqlSubmit">提交</el-button>
            <el-button size="small" @click="reset">重置</el-button>
          </div>
        </div>


        <div class="fields-cls">
          <div class="fields-name">字段</div>
          <draggable :list="tableField"
            :options="{group:{name: falgs,pull:'clone'},filter: '.undraggable', sort: false}" @end="end"
            class="dragArea">
            <div v-for="element in tableField" :key="element.id" :class="{undraggable : element.flag}"
              class="list-complete-item">
              <div v-if="element.cname == ''"> {{element.name}}</div>
              <div v-else>{{element.cname}}</div>
            </div>
          </draggable>
        </div>
      </div>
    </div>

    <div class="main-cls">
      <div class="button-cls">
        <el-button size="small" style="margin-left: 10px;">取消</el-button>
        <el-button type="primary" size="small">保存</el-button>
      </div>

      <div class="toInput">
        <draggable :list="fileds" :options="{group:'article', disabled: disabled}" @end="end22" class="dragArea11"
          style="height: 100px">
          <div v-for="(element, index) in fileds" :key="element.id" class="list-complete-item-input">
            <div class="list-complete-item-handle">
              <span v-if="element.cname == ''">{{element.name}}</span>
              <span v-else>{{element.cname}}</span>
              <span><i class="el-icon-delete" @click="handleDel(index, element.id)"></i></span>
            </div>
          </div>
        </draggable>
      </div>


      <div class="table">
        <el-table :data="filedsData" border>
          <el-table-column v-for="(item,index) in filedsData" :label="item.cname == ''? item.name:item.cname"
            :prop="item.value">
            <template slot-scope="scope">
              <span v-if="scope.row.cname == ''">{{scope.row.name}}</span>
              <span v-else>{{scope.row.cname}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="right-side">
      <div class="edittable">
        <div class="edit-value">表格属性</div>
        <el-table :data="tableField" border max-height="200" @row-click="rowClickOne">
          <el-table-column prop="name" label="字段名" width="105px">
            <template slot-scope>

            </template>
          </el-table-column>
          <el-table-column prop="headlevel" label="标题级别" width="115px">
            <template slot-scope="scope">
              <span v-if="scope.row.id === tableCellClickRowIndex && scope.column.id === tableCellClickColumnIndex">
                <el-input placeholder="请输入内容…" @blur="tableCellInputBlur" size="mini" v-model="scope.row.headlevel"
                  autofocus />
              </span>
              <span v-else>{{scope.row.headlevel}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="edittable">
        <div class="edit-value">字段属性</div>
        <el-table :data="tableField" border max-height="200" @row-click="rowClickOne">
          <el-table-column prop="name" label="字段名" width="105px">
          </el-table-column>

          <el-table-column prop="cname" label="字段别名" width="115px">
            <template slot-scope="scope">
              <span v-if="
                  scope.row.id === tableCellClickRowIndex &&
                  scope.column.id === tableCellClickColumnIndex
                ">
                <el-input placeholder="请输入内容…" @blur="tableCellInputBlur" size="mini" v-model="scope.row.cname"
                  autofocus />
              </span>

              <span v-else>{{scope.row.cname}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="edittable">
        <div class="edit-value">计算类</div>
        <el-table :data="tableComputer" border max-height="200">
          <el-table-column prop="attribute" label="属性">
          </el-table-column>
          <el-table-column prop="value" label="值">
          </el-table-column>
        </el-table>
      </div>
    </div>

  </div>
</template>
<script>
  import draggable from 'vuedraggable';
  import {
    getFileds
  } from '@/api/sqlstate/fileds'

  export default {

    components: {
      draggable
    },

    data() {
      return {

        tableCellClickRowIndex: null, // 点击的单元格行索引
        tableCellClickColumnIndex: null, // 点击的单元格列索引

        sqltext: "select * from sys_post",

        sqlstatement: {
          sqlStr: ""
        },

        fileds: [{
          attribute: "标题",
          value: ""
        }],

        itemTemp: {
          id: "",
          name: "",
          value: ""
        },

        filedsData: [],

        falgs: 'article',
        disabled: false,
        fileds: [],

        tableAttribute: [{
          attribute: "标题",
          value: ""
        }],

        filedsAttribute: [{
          attribute: "标题",
          value: ""
        }],

        data: [{
          label: '预警模型 1',
          children: [{
            label: '预警模型 1-1',
            children: [{
              label: '预警模型 1-1-1'
            }]
          }]
        }, {
          label: '预警模型 2',
          children: [{
            label: '预警模型 2-1',
            children: [{
              label: '预警模型 2-1-1'
            }]
          }, {
            label: '预警模型 2-2',
            children: [{
              label: '预警模型 2-2-1'
            }]
          }]
        }, {
          label: '预警模型 3',
          children: [{
            label: '预警模型 3-1',
            children: [{
              label: '预警模型 3-1-1'
            }]
          }, {
            label: '预警模型 3-2',
            children: [{
              label: '预警模型 3-2-1'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        filterTypeList: [{
            icon: '',
            name: "1",
            filterName: "字段名",
            describe: "描述"
          },
          {
            icon: '',
            name: "2",
            filterName: "字段名",
            describe: "描述"
          }
        ],
        drag: false,
        textarea1: "",
        tableComputer: [{
            attribute: "小计",
            value: ""
          },
          {
            attribute: "小计",
            value: ""
          }
        ],
        tableField: [
          // {
          //   id: "1",
          //   name: "区县"
          // },
          // {
          //   id: "2",
          //   name: "扶持企业"
          // },
          // {
          //   id: "3",
          //   name: "项目"
          // },
          // {
          //   id: "4",
          //   name: "税收增长率"
          // },
          // {
          //   id: "5",
          //   name: "扶持年度"
          // }
        ],

        filedsIndex: 0,

        disabled: false,
        tempArr: [],

      }
    },
    methods: {

      tableCellInputBlur(row, event, column) {
        this.tableCellClickRowIndex = null;
        this.tableCellClickColumnIndex = null;
        console.log(this.tableField)
      },

      reset() {
        this.sqltext = ""
      },

      rowClickOne(row, column, e) {
        console.log(column)
        this.tableCellClickRowIndex = row.id;
        this.tableCellClickColumnIndex = column.id;
      },

      end(ev) {
        if (ev.to.className === 'dragArea11') {
          this.$set(this.tableField[ev.oldIndex], 'flag', true)
          console.log(ev)
          this.itemTemp = {}
          this.itemTemp.value = ev.item._underlying_vm_.value
          this.itemTemp.name = ev.item._underlying_vm_.name
          this.itemTemp.id = ev.item._underlying_vm_.id
          this.itemTemp.cname = ev.item._underlying_vm_.cname
          this.filedsData.push(this.itemTemp)
          console.log("-------filedsData-------" + JSON.stringify(this.filedsData))
        }
      },
      end22(ev) {
        this.falgs = 'article'
      },
      handleDel(index, id) {
        this.fileds.splice(index, 1)
        this.filedsData.splice(index, 1)
        let q = this.tableField.find((value, index, arr) => {
          return value.id === id
        })

        this.$set(q, 'flag', false)

      },

      //点击触发事件
      handleNodeClick(data) {
        //console.log(data);
      },
      handleEdit(data) {
        this.$emit('edit', data)
      },
      handleDelete(data) {
        this.$emit('delete', data)
      },

      handleDraggableChange() {
        this.$emit('change', this.filterTypeList)
      },

      sqlSubmit() {

        var form = {
          SqlStr: this.sqltext
        }

        getFileds(form).then(response => {
          if (response.code == 200) {

            this.tableField = []
            this.$message({
              showClose: true,
              message: 'sql语句验证成功！',
              type: 'success'
            })
            console.log(response.data)

            for (var key in response.data[0]) {
              this.filedsIndex = this.filedsIndex + 1
              var tempData = {}
              tempData.id = this.filedsIndex;
              tempData.name = key;
              tempData.cname = "";
              tempData.headlevel = "";
              this.tableField.push(tempData)
            }
          }
        });


      }
    },

    computed: {
      dragOptions() {
        return {
          animation: 200,
          group: "description",
          disabled: false,
          ghostClass: "ghost"
        };
      }
    }
  }

</script>
<style lang="scss" scoped>
  .sql-btn {
    margin-top: 10px;
  }

  .button-cls {
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: row-reverse;
  }

  .edittable {
    padding-top: 20px;
  }



  .toInput {
    height: 43px;
    width: 100%;
    border: 1px solid gainsboro;
    margin-bottom: 20px;
    overflow-x: auto;
    white-space: nowrap;
    overflow-y: hidden;
  }

  .toInput::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  /*正常情况下滑块的样式*/

  .toInput::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .05);
    border-radius: 10px;
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
  }

  /*鼠标悬浮在该类指向的控件上时滑块的样式*/

  .toInput:hover::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.089);
    border-radius: 10px;
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
  }

  /*鼠标悬浮在滑块上时滑块的样式*/

  .toInput::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.322);
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
  }

  /*正常时候的主干部分*/

  .toInput::-webkit-scrollbar-track {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
    background-color: white;
  }

  /*鼠标悬浮在滚动条上的主干部分*/

  .toInput::-webkit-scrollbar-track:hover {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .4);
    background-color: rgba(0, 0, 0, .01);
  }

  .outline {
    padding-right: 20px;
    padding-top: 20px;
    display: flex;
    width: auto;
    height: auto;
  }

  .treeDiv {
    width: 150px;
    height: 200px;
  }

  .fields-cls {
    width: 200px;
    border: 1px solid gainsboro;
    margin-top: 20px;
    font-size: 14px;
  }

  .fields-name {
    padding: 10px;
    font-size: 15px;
    font-weight: 700;
  }

  .zd {
    font-weight: 600;
    padding: 10px;
  }

  .icon-color {
    color: rgb(0, 191, 43);
  }

  .def-zd {
    padding-top: 10px;
    padding-bottom: 10px;
  }


  /* .f-item-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5.5px 0;
    cursor: pointer;

    .f-item-box {
      width: calc(100% - 16px);
      display: flex;
      align-items: center;
    }

    .f-item-svg {
      width: 14px;
      height: 14px;
      line-height: 14px;
      margin-right: 4px;
      color: $theme-color;
      font-size: 14px;
    }

    .f-item-svg-special {
      color: #FA8C16;
    }

    .f-item-name {
      width: calc(100% - 18px);
      color: $color-text-regular;
      font-size: 12px;
      line-height: 14px;
    }

    .el-icon-delete {
      display: none;
      font-size: 12px;
      transition: all .3s;
    }
  } */

  .out {
    display: flex;
  }

  .inline-share {
    border-radius: 50% / 50%;

  }

  .list-complete-item {
    font-size: 14px;
    padding: 5px 12px;
    /* margin-right: 20px; */
    transition: all 1s;
  }

  .list-complete-item-input {
    cursor: pointer;

    font-size: 14px;
    padding: 5px 12px;
    margin: 5px;
    display: inline-block;
    margin-right: 20px;
    /* width: 50px;
        height: 50px; */

    border: 1px solid #bfcbd9;
    transition: all 1s;
  }

  .list-complete-item.sortable-chosen {
    background: #F0F8FF;
  }

  .list-complete-item.sortable-ghost {
    background: #F0F8FF;
  }

  .undraggable {
    background-color: #F0F8FF;
  }

  .list-complete-enter,
  .list-complete-leave-active {
    opacity: 0;
  }

  .main-cls {
    width: 55%;
    padding-right: 20px;
  }

  .edit-value {
    font-weight: 800;
    padding-bottom: 10px;
    font-size: 15px;
  }

</style>
